import {inject, observer} from 'mobx-react';
import {Alert, Button, Col, Row, Tabs} from 'antd'
import {WeaTab, WeaTools, WeaTop , WeaLocaleProvider,WeaErrorPage} from 'ecCom'
import {Synergy} from 'weaPortal';
import MLinkCard from './MLinkCard';
import OLinkCard from './OLinkCard';
import UsedToDoList from './UsedToDoList';
import * as mobx from 'mobx';

const TabPane = Tabs.TabPane;
const ButtonGroup = Button.Group;
const getLabel = WeaLocaleProvider.getLabel;

@inject('wfAddStore')
@observer
class Add extends React.Component {
	constructor(props) {
		super(props);
	}
	componentDidMount() {
		const {wfAddStore,location} = this.props;
		wfAddStore.initDatas({"needall":"1",...location.query});
		window.addEventListener("resize",wfAddStore.setUpdate);
	}
	componentWillReceiveProps(nextProps) {
        const keyOld = this.props.location.key;
        const keyNew = nextProps.location.key;
        if(keyOld!==keyNew) {
			const {wfAddStore} = this.props;
			wfAddStore.setSearchValue("");
			wfAddStore.initDatas({"needall":"1",...nextProps.location.query});
        }
        //nextProps.add.has("wftypes") 不清楚谁加的，会导致报错先删除有需要再修改
		if(window.location.pathname.indexOf('/spa/workflow/index') >= 0 && document.title !== getLabel(84759,"新建流程"))
            document.title = getLabel(84759,"新建流程");
    }
	componentWillUnmount(){
		//记录上次打开的模式
		const {wfAddStore} = this.props;
		wfAddStore.setSearchValue("");
		window.removeEventListener("resinze",wfAddStore.setUpdate);
	}
	goABC = (letter) => {
		const {wfAddStore} = this.props;
		wfAddStore.setAbcSelected(letter);
	  	let topheight = jQuery('#'+letter).position().top;
	  	jQuery(".wea-wf-add-content").scrollTop(topheight);
	}
	render() {
		const {wfAddStore,location = {}} = this.props;
		const {query = {}} = location;
		const {isNeedTop = '1',isNeedTab = '1'} =query;
		const cardItemParams = {...query};

		const {showDatas = {},value,tabkey,mulitcol,isAbc,loading,importDataShow,wfOperateInfo,wfTypeTips} = wfAddStore;
		const {typesShow,typesCols,usedBeans,abcBtns,user} = showDatas;
		
		const {setImportSearchValue,importWf,doAddWfToColl,setShowBeagenters,setShowImportWf,getImportData,createwflabels = {},tabDatas = []} = wfAddStore;
		const actions  = {setImportSearchValue,importWf,doAddWfToColl,setShowBeagenters,setShowImportWf,getImportData};
		const {toplabel = getLabel(84759,"新建流程"),topIcon = 'icon-coms-workflow',iconBgcolor = '#0079DE'} = createwflabels;
		if(!wfAddStore.title){
			wfAddStore.title = getLabel(84759,"新建流程");
		}
		return (
		   	<div className="wf-create-main">
				{isNeedTop === '1' && <WeaTop ecId={`${this && this.props && this.props.ecId || ''}_WeaTop@qi3k56`} loading={loading} icon={<i className={topIcon} />} iconBgcolor={iconBgcolor} title={wfAddStore.title} buttons={this.getButtons()} hideButtons={this.getHideButtons()} showDropIcon={false}/>}
				{isNeedTab === '1' &&
					<WeaTab ecId={`${this && this.props && this.props.ecId || ''}_WeaTab@3jho9w`}
						onSearchChange={this.doSearch}
						searchsBaseValue={value}
						selectedKey={tabkey}
						datas={tabDatas}
						searchType={['base']}
						keyParam='key'
						onChange={this.changeTab}>
					</WeaTab>
				}
				<div className='wea-wf-add-content'>
					{isAbc && tabkey !== "3" && (
						<div className="abcbtn-group">
						{
							abcBtns.map(abcBtn => <Button ecId={`${this && this.props && this.props.ecId || ''}_Button@7zlik6@${tabkey}`} className={abcBtn.selected ? 'btn-selected' : ''} type='ghost' key={abcBtn.letter}
								disabled={abcBtn.disabled} onClick={this.goABC.bind(this,abcBtn.letter)}>{abcBtn.letter}</Button>)
						}
						</div>)
					}
	           		{tabkey == "3" ? (
	           			usedBeans.length == 0 && !loading ? <Alert ecId={`${this && this.props && this.props.ecId || ''}_Alert@xxpoqd`} message={getLabel(558,"提示")} description={getLabel(385021,"数据为空")} type="info" showIcon /> :
						   		<UsedToDoList ecId={`${this && this.props && this.props.ecId || ''}_UsedToDoList@61bndw`} cardItemParams={cardItemParams} user={user} wfbeans={usedBeans} importDataShow={importDataShow} wfOperateInfo={wfOperateInfo}  actions={actions} />
	           			):(
	           			typesShow.length == 0 && !loading ? <Alert ecId={`${this && this.props && this.props.ecId || ''}_Alert@7u23l4`} message={getLabel(558,"提示")} description={getLabel(385021,"数据为空")} type="info" showIcon /> :(
			           		mulitcol ?
		           			<Row ecId={`${this && this.props && this.props.ecId || ''}_Row@znpbv0`}>
		           				{typesCols.map(c=>{
		           					return <Col ecId={`${this && this.props && this.props.ecId || ''}_Col@l0j0h1@${tabkey}`} span={24 / typesCols.length} style={{padding:'0 10px'}}>
										<MLinkCard ecId={`${this && this.props && this.props.ecId || ''}_MLinkCard@ca3erp@${tabkey}`} cardItemParams={cardItemParams} types={c} user={user} mulitcol={mulitcol} importDataShow={importDataShow} isAbc={isAbc} wfOperateInfo={wfOperateInfo} actions={actions} wfTypeTips={wfTypeTips}/>
									</Col>
		           				})}
		           			</Row>
							:
							<Row ecId={`${this && this.props && this.props.ecId || ''}_Row@qyr068`}>
								<Col ecId={`${this && this.props && this.props.ecId || ''}_Col@e4v1mc`} span="24" style={{paddingLeft:10,paddingRight:10}}>
									<OLinkCard ecId={`${this && this.props && this.props.ecId || ''}_OLinkCard@1a9lpd`} cardItemParams={cardItemParams} user={user} types={typesShow} mulitcol={mulitcol} importDataShow={importDataShow} isAbc={isAbc} wfOperateInfo={wfOperateInfo} actions={actions}/>
								</Col>
							</Row>)
	           			)
	           		}
				</div>
		       	<form id="subform" name="subform" method="get" action="RequestType.jsp" target="_blank">
		       		<input type="hidden" id="workflowid" name="workflowid" />
					<input type="hidden" id="isagent" name="isagent"/>
					<input type="hidden" id="beagenter" name="beagenter"/>
					<input type="hidden" id="f_weaver_belongto_userid" name="f_weaver_belongto_userid"/>
		    	</form>
				<Synergy ecId={`${this && this.props && this.props.ecId || ''}_Synergy@uzlfn0`} pathname='/workflow/add' requestid="-1" />
            </div>
		)
	}
	getButtons(){
		const {wfAddStore} = this.props;
		const {isAbc,mulitcol,tabkey} = wfAddStore;
		return [
		 	(tabkey != '3' && <i className={"icon-button icon-New-Flow-Letter" + (isAbc ? ' wea-new-top-btn-clicked' : '')} onClick={this.showABC}/>),
		 	(tabkey != '3' && <i className={"icon-button icon-New-Flow-1" + (mulitcol ? ' wea-new-top-btn-clicked' : '')} onClick={this.showMulitcol}/>)
		]
	}
	getHideButtons() {
        return [
            (<a href="javascript:void(0)" onClick={()=>{}}>{getLabel(386165,"第一个菜单项")}</a>),
            (<a href="javascript:void(0)" onClick={()=>{}}>{getLabel(386166,"第二个菜单项")}</a>)
        ]
    }
	showMulitcol = () => {
		const {wfAddStore} = this.props;
		const mulitcol = wfAddStore.mulitcol;
		wfAddStore.setMulitcol(!mulitcol);
		jQuery(".wea-wf-add-content").scrollTop(0);
	}
	showABC = () => {
		const {wfAddStore} = this.props;
		const {isAbc} = wfAddStore;
		wfAddStore.setIsAbc(!isAbc);
		jQuery(".wea-wf-add-content").scrollTop(0);
	}
	changeTab = (k) => {
		const {wfAddStore} = this.props;
		if(parseInt(k) === 99){
			var dialog = new window.top.Dialog();
			dialog.currentWindow = window;
			dialog.Width = 1200;
			dialog.Height = 660;
			dialog.Modal = true;
			dialog.Title = getLabel(386167,"流程结构图");
			dialog.URL = "/midyeardemo/showWf.jsp";
			dialog.isIframe=false;
			dialog.show();
		}else{
			wfAddStore.changeTab(k);
			jQuery(".wea-wf-add-content").scrollTop(0);
		}
	}
	doSearch = (v) => {
		const {wfAddStore} = this.props;
		wfAddStore.setSearchValue(v);
		jQuery(".wea-wf-add-content").scrollTop(0);
	}
}

export default WeaTools.tryCatch(React,
	props => <WeaErrorPage ecId={`${this && this.props && this.props.ecId || ''}_WeaErrorPage@7eqiva`} msg={ props.error ? props.error : getLabel(383324,' 对不起，该页面异常，请联系管理员 ')+'！'} />,
	{error: ""}
)(Add);